<template>
  <div>
    <van-tabs v-model="activeName" @click="photoTab">
      <van-tab title="全部" name="0">
        <van-list>
          <van-cell v-for="item1 in imagesList" :key="item1.id" @click="datail(item1.id)">
            <div>
              <img :src="item1.img_url" />
            </div>
            <div class="botInfo">
              <p>{{item1.title}}</p>
              <p>{{item1.zhaiyao}}</p>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab v-for="item in photoList" :title="item.title" :key="item.id" :name="item.id">
        <van-list>
          <van-cell v-for="item1 in imagesList" :key="item1.id" @click="datail(item1.id)">
            <div>
              <img :src="item1.img_url" />
            </div>
            <div class="botInfo">
              <p>{{item1.title}}</p>
              <p>{{item1.zhaiyao}}</p>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoList: [],
      activeName: '0',
      imagesList: []
    }
  },
  created() {
    this.getPhotoList()
    this.getImages()
  },
  methods: {
    async getPhotoList() {
      const { data: res } = await this.$http.get('/api/getimgcategory')
      if (res.status !== 0) {
        return this.$toast('获取图片分类数据失败!')
      }
      this.photoList = res.message
    },
    async getImages() {
      const { data: res } = await this.$http(
        `/api/getimages/${this.activeName}`
      )
      if (res.status !== 0) {
        return this.$toast('获取图片失败!')
      }
      this.imagesList = res.message
    },
    photoTab() {
      this.getImages()
    },
    datail(id) {
      this.$router.push(`/photo/Info/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.van-cell {
  width: 100%;
  margin: 10px 0;
  border-radius: 5px;
  overflow: hidden;
  height: 300px;
  min-height: 200px;
  position: relative;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .botInfo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 0 10px;
    height: 75px;
    box-sizing: border-box;
    p {
      margin: 5px 0;
      font-size: 12px;
      line-height: 16px;
    }
  }
}
</style>
